<%@ page contentType="text/html; charset=utf-8" %>

<%@ include file="/WEB-INF/jsp/includeTaglib.jsp" %>
<%@ include file="/WEB-INF/jsp/includeCss.jsp" %>
<%@ include file="/WEB-INF/jsp/includeJs.jsp" %>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="<c:url value='/js/chinamap/chinamap.js' />"></script>

<div class="globalText">
	<span><a id="changeModelBtn" style="font-size:larger;color:blue;margin-left: 10px;font-weight: bold;" onclick="showHideMap(this);" model="list" href="javascript:;" >${standardAdminDivAreaName}--地图模式</a></span>

	<c:if test="${adminDivLevelDeep=='3'}">
		<span id="selectMaxPoint" style="display: none;">
			地图显示点最大个数
			<select onchange="changeShowPageSize(this.options[this.selectedIndex].value)">
				<option <c:if test="${pageSize==50}">selected="selected"</c:if> value="50">50</option>
				<option <c:if test="${pageSize==100}">selected="selected"</c:if> value="100">100</option>
				<option <c:if test="${pageSize==200}">selected="selected"</c:if> value="200">200</option>
				<option <c:if test="${pageSize==300}">selected="selected"</c:if> value="300">300</option>
			</select>
		</span>
	</c:if>


</div>

<div  id="mapContainer" style="height: 100%;display: none;margin: 5px;">Loading...</div>

<table id="listContainer" width="100%" border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td valign="top">
      <table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="bottom" class="blueTableBg">&nbsp;分析报表&nbsp;-&nbsp;门店开店率统计
<!--           	<span><a onclick="showHideData(this);" status="open" href="javascript:;">隐藏</a></span> -->
          </td>
        </tr>

<%-- 		<%@ include file="/WEB-INF/jsp/project/projectSearch.jsp" %>         --%>
        <tr>
          <td>
            <table id="reportListDataTable"  width="100%" border="0" cellpadding="0" cellspacing="5">
              <tr>
                <td>
                  <table  width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td class="dashTopLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashTop" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashTopRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>

                    <tr>
                      <td class="dashLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td align="center">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
											  <tr>
											     <td>
										       	<div id="reportListData" class="pageDiv">
															<%@ include file="/WEB-INF/jsp/report/storeOpeningRate/reportListDataCityMap.jsp" %>
										       	</div>
											     </td>
											   </tr>
                        </table><p/>
                      </td>
                      <td class="dashRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                    <tr>
                      <td class="dashBottomLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashBottom" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashBottomRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<div id="tempHiddenBlock" style="display: none;">
</div>

<script type="text/javascript">
// 	<c:if test="${!empty standardAdminDivAreaCode}">
// 		<c:if test="${adminDivLevelDeep == 6}">
// 			listDefaultPageAjax('reportListData','reportForm','<c:url value="/report/storeOpeningRate/reportListData/6/${standardAdminDivAreaCode}.html" />');
// 		</c:if>
// 		<c:if test="${adminDivLevelDeep == 1}">
// 		listDefaultPageAjax('reportListData','reportForm','<c:url value="/report/storeOpeningRate/reportListData/1/${standardAdminDivAreaCode}.html" />');
// 		</c:if>
// 	</c:if>
</script>

	<c:url var="tempUrl" value="/report/storeOpeningRate/reportList/2/${standardAdminDivAreaCode}.html">
		<c:param name="sysCategory" value="${sysCategory}" />
		<c:param name="channelCatCode" value="${channelCatCode}" />
		<c:param name="projectCode" value="${projectCode}" />
	</c:url>

	<script type="text/javascript">

		function changeShowPageSize(size){
			var url='${tempUrl}'+"&pageSize="+size+"&showModel=map";
			window.location=url;
		}

		function showHideMap(obj){
			var model=$(obj).attr("model");
			if(model=='list'){
				$(obj).attr("model","map");

				$("#listContainer").fadeOut();
				$("#mapContainer").show();
				$("#selectMaxPoint").show();

				$(obj).html("${standardAdminDivAreaName}--列表模式");
			}else{
				$(obj).attr("model","list");

				$("#mapContainer").hide();
				$("#listContainer").fadeIn();
				$("#selectMaxPoint").hide();

				$(obj).html("${standardAdminDivAreaName}--地图模式");
			}
		}



		$(document).ready(function() {



		var map = new BMap.Map("mapContainer");

		var cityOrProvinceAdName = "${standardAdminDivAreaName}";
		var mapZoomLevel = "${mapZoomLevel}";

		//初始化地图,设置中心点坐标和地图级别，13是一个相对合适的用于城区级别展示的ZOOM等级
		//初始化地图,设置中心点坐标和地图级别，8是一个相对合适的用于省市级别展示的ZOOM等级
		map.centerAndZoom(cityOrProvinceAdName, 10);

		//启用鼠标滚轮控制地图Zoom
//		map.enableScrollWheelZoom();

		//启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图
		map.enableKeyboard();

		//启用部分地图辅助控件
		map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//BMAP_HYBRID_MAP 卫星图
		map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
		var opts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT  , offset: new BMap.Size(10, 550)};
		map.addControl(new BMap.NavigationControl(opts));//添加鱼骨控件

		//创建地址解析器实例
		var myGeo = new BMap.Geocoder();

		<c:if test="${adminDivLevelDeep == 2}">
	    	var bdary = new BMap.Boundary();
	    	map.clearOverlays();
// 	    bdary.get(cityOrProvinceAdName, function(rs){
// 	        var count = rs.boundaries.length;
// 	        for(var i = 0; i < count; i++){
// 	            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"});
// 	            //map.addOverlay(ply);
// 							map.setViewport(ply.getPath());
// 	        }
// 	    });

			<c:forEach var="sor" items="${storeOpeningRates}" varStatus="status">
				var areaName = "${sor.adminDivAreaName}";
		    	bdary.get(areaName, function(rs){
		        var count = rs.boundaries.length;
		        for(var i = 0; i < count; i++){
		            var ply = new BMap.Polygon(rs.boundaries[i], {fillColor:getColorByPercent("${sor.percentIntValue}"), strokeWeight: 2, strokeColor: "#ff0000"});

		            map.addOverlay(ply);
		            ply.addEventListener("click", function(){

 		            	var confirmDialogShow = "${sor.adminDivAreaName}\n计划开店数:${sor.plannedQuantityOfStoreOpening}/实际开店数:${sor.actualQuantityOfStoreOpening} 开店率:${sor.percentValueFormatted}\n确定要进入吗?";
									if(window.confirm(confirmDialogShow)) {
										window.location = "<c:url value='/report/storeOpeningRate/reportList/2/${sor.adminDivAreaCode}.html' />"+"?showModel=map";
									} else {
										return false;
									}
		            });
		        }
		    });
			</c:forEach>
		</c:if>

		<c:if test="${adminDivLevelDeep == 3}">
			var storeOpenedMarkerImg = "<c:url value='/images/marker-storeopened.png' />";
			var storeOpenedIcon = new BMap.Icon(storeOpenedMarkerImg, new BMap.Size(20, 30));


			//planOpenStoreList

			try{
				var plannedStoresDetail=${plannedStoresDetail};
				for(var i in plannedStoresDetail){
					renderStores(plannedStoresDetail[i].CHANNEL_ADDRESS,
								 plannedStoresDetail[i].CHANNEL_NAME,
								 plannedStoresDetail[i].CHANNEL_AD_NAME,
								 plannedStoresDetail[i].CHANNEL_CITY_AD_NAME,
								 plannedStoresDetail[i].PROJECT_NAME,
								 true,
								 null);
				}
			}catch(e){
			}



			try{
				var actualStoresDetail=${actualStoresDetail};
				for(var i in plannedStoresDetail){
					renderStores(actualStoresDetail[i].CHANNEL_ADDRESS,
								 actualStoresDetail[i].CHANNEL_NAME,
								 actualStoresDetail[i].CHANNEL_AD_NAME,
							     actualStoresDetail[i].CHANNEL_CITY_AD_NAME,
								 actualStoresDetail[i].PROJECT_NAME,
								 false,
								 actualStoresDetail[i].FINISH_AT);
				}
			}catch(e){
			}


		</c:if>

		function renderStores(storeAddress, storeName, storeAdName, storeCityAdName, projectName, isRenderStorePlannedRemained,finishAt) {
			//将地址解析结果显示在地图上，并调整地图视野
			//不合法的地址将无法显示在地图上
			myGeo.getPoint(storeAddress, function(point) {
				if (point) {
					var marker;
					if (isRenderStorePlannedRemained == true) {
						marker = new BMap.Marker(point);
					} else {
						marker = new BMap.Marker(point, {icon: storeOpenedIcon});
					}

					//相同地址的位置标记可能会被遮盖,因此简单地启用拖动,TODO:jay 自动留出offset...
					marker.enableDragging();

					var opts = {
					  title : storeName + " ["+storeAdName+"/"+storeCityAdName+"]"  // 信息窗口标题
					}
					map.addOverlay(marker);
					var content = "地址: "+storeAddress + "<br/>项目: "+projectName;
					if(finishAt!=null){
						content+="<br/>完成时间: "+finishAt;
					}

					var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
					marker.addEventListener("click", function() {
						this.openInfoWindow(infoWindow);
					});
				}
			}, cityOrProvinceAdName);
		}

		<c:if test="${showModel=='map'}">
			showHideMap(document.getElementById("changeModelBtn"));
		</c:if>

		});
	</script>



<script type="text/javascript">
// addFunnScreemButton();

function showHideData(obj){
	if(obj.getAttribute("status")=='open'){
		$("#reportListDataTable").fadeOut();
		$("#mapContainer").css("height","100%");
		obj.setAttribute("status","close");
		obj.innerHTML="展开";
	}else{
		$("#reportListDataTable").fadeIn();
		$("#mapContainer").css("height","58%");
		obj.setAttribute("status","open");
		obj.innerHTML="隐藏";
	}
}
</script>
